<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue的css控制</title>
  <link rel="stylesheet" href="./css/vue-css.css">

</head>

<body>

  <div id="app">

    <div>
      {{ current }}
      <br>
      {{menus}}
    </div>

    <div class="menus">
      <!-- 
        vue通过:class修改class是等同于classList属性来控制class属性
        而不是简单替换掉class属性，所以也是唯一属性注入和属性本身可以同时出现的
        class注入的格式是一个json
        json的key是css中定义class
        值是一个逻辑表达式
        可以有多组
        如果逻辑表达式为真，对应key的class就会被添加到class列表中
        否则对应key的class会被移除
      -->
      <span v-for="d in menus" :class="{'active':current==d.id}" class="abc" @click="changeMenu(d)">{{d.text}}</span>

    </div>

    <hr>

    <div v-if="current == 1">
      首页的内容
    </div>
    <div v-else-if="current == 2">
      作品展示的内容
    </div>
    <div v-else>
      关于我
    </div>


  </div>

  <script src="./js/vue-css.js" type="module"></script>

</body>

</html>